<template>
	<div>
		<div class="cif-input">
			<div class="cif-input-label">字段值</div>
			<div class="cif-input-wrapper">
				<el-input v-model="origin" @change="handleOriginChange"></el-input>
			</div>
		</div>
		<div class="cif-input">
			<div class="cif-input-label">变量名</div>
			<div class="cif-input-wrapper">
				<el-input v-model="target" @focus="handleFocus" @change="handleTargetChange"></el-input>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import _ from 'lodash';
import { usePrimaryStore } from '@/store';

const store = usePrimaryStore();
const props = defineProps({
	instance: {
		type: Object,
		default() {
			return {};
		}
	},
	callbackArg: {
		type: Object,
		default() {
			return {};
		}
	}
});
const callbackArg = ref(props.callbackArg);

const origin: any = ref(callbackArg.value['origin'] || '');
const oldTarget: any = ref(callbackArg.value['target'] || '');
const target: any = ref(callbackArg.value['target'] || '');

function handleOriginChange() {
	callbackArg.value['origin'] = origin.value;
}
function handleFocus() {
	// 留存历史数据
	oldTarget.value = target.value;
}
function handleTargetChange() {
	callbackArg.value['target'] = target.value;
	// 触发store中属性(key)的变化
	// K1: {
	//   value: "1212", // 来源于aa
	//   origin: aa,
	//   originCpnt: cpntid,
	// },
	// let cpnt = {
	//   origin: this.origin,
	//   originCpnt: this.instance.uuid,
	// }
	store.changeCallbackPoolKey({
		origin: origin.value,
		originCpnt: props.instance.uuid,
		oldTarget: oldTarget.value,
		newTarget: target.value
	});
}

onMounted(() => {});
defineExpose({});
</script>

<style lang="scss" scoped>
.cif-input {
	display: flex;
	margin-bottom: 10px;
	&-label {
		display: inline-block;
		overflow: hidden;
		line-height: 40px;
		white-space: nowrap;
		text-align: right;
		vertical-align: middle;
		margin-right: 10px;
		color: var(--white);
	}
	&-wrapper {
		flex: 1;
	}
}
</style>
